<template>
    <BasicTable ref="tableRef" :params="params" :columns="columns" :query="queryJoin" :load="false" @select-change="selectChange">
        <template #form>
            <a-form-item label="用户名" name="username">
                <a-input v-model:value="params.username" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item label="手机号" name="phone">
                <a-input v-model:value="params.phone" placeholder="请输入手机号" />
            </a-form-item>
        </template>
        <template #button>
            <a-button v-permission="'system:term:adduser'" type="primary" @click="open(modalRef, params.teamId)">
                <template #icon>
                    <PlusOutlined />
                </template>
                已有用户
            </a-button>
            <a-button v-permission="'system:term:deleteuser'" type="primary" danger :disabled="isDisable" @click="batchDel(batchDelete, tableRef)">
                <template #icon>
                    <ApiOutlined />
                </template>
                取消关联
            </a-button>
        </template>
        <template #table="{ body }">
            <template v-if="body.column.key === 'action'">
                <a-popconfirm title="确定要取消关联吗" @confirm="del(deleteById, body.record.id, tableRef)">
                    <a-button v-permission="'system:term:deleteuser'" type="link">
                        <template #icon>
                            <ApiOutlined />
                        </template>
                        取消关联
                    </a-button>
                </a-popconfirm>
            </template>
        </template>
    </BasicTable>
    <Modal ref="modalRef" @close="refresh(tableRef)" />
</template>
<script setup>
import { nextTick, reactive, ref } from 'vue'
import { ApiOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { queryJoin, deleteById, batchDelete } from '/@/api/System/Team/User'
import { useBasicTable } from '@iframe/tools/mixins/BasicTableMixins'
import { BasicTable } from '@iframe/tools/components'
import Modal from './Modal.vue'
const { refresh, del, open, isDisable, batchDel, selectChange } = useBasicTable()

const modalRef = ref()
const tableRef = ref()
const params = reactive({
    username: null,
    phone: null,
    teamId: null
})
const columns = [
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username'
    },
    {
        title: '姓名',
        dataIndex: 'realname',
        key: 'realname'
    },
    {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
        align: 'center',
        width: 130
    },
    {
        title: '工号',
        dataIndex: 'work_no',
        key: 'work_no',
        align: 'center',
        width: 100
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 180
    }
]

const queryTeamUser = teamId => {
    params.teamId = teamId
    nextTick(() => {
        tableRef.value.handleRefresh()
    })
}
defineExpose({ queryTeamUser })
</script>
